{% extends "showinfo/base.html" %}

{% block content %}


    <style>
        h4 {
            margin-top: 25px;
        }

        .row {
            margin-bottom: 20px;
        }

        .row .row {
            margin-top: 10px;
            margin-bottom: 0;
        }

        [class*="col-"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;

            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }

        hr {
            margin-top: 40px;
            margin-bottom: 40px;
        }
    </style>




    <!--

        <div class="row chat-window col-xs-5 col-md-12" id="chat_window_1" style="margin-left:10px;">

            <div class="panel panel-default">
                <div class="panel-heading top-bar" id="chatlist">

                </div>
                <div class="panel-body msg_container_base">

                    <div class="panel-footer">
                        <div class="input-group">
                            <input type="text" class="form-control input-sm chat_input" id="content"
                                   placeholder="写下你要说的话"> <span class="input-group-btn">
                            <button class="btn btn-primary btn-sm" onclick="getdata()">Send</button>
                            </span>

                        </div>
                    </div>
                </div>
            </div>

        </div>


    -->
    <div class="container" id="chatlist">


    </div>
    <div class="row">
    <div class="panel-footer">
        <div class="input-group" style="width:inherit">
            <input type="text" class="form-control input-sm chat_input col-md-4" id="content"
                   placeholder="写下你要说的话"> <span class="input-group-btn">
                        <button class="btn btn-primary btn-sm" onclick="getdata()">Send</button>
                        </span>

        </div>
    </div>
</div>



    <script>

        String.format = function (src) {
            if (arguments.length == 0) return null;
            var args = Array.prototype.slice.call(arguments, 1);
            return src.replace(/\{(\d+)\}/g, function (m, i) {
                return args[i];
            });
        };
        {% load staticfiles %}

        function getdiv2(content, issend) {
            if (issend) {
                var divstr = '<div class="row">' +
                        '<div class="col-xs-2">' +
                        '<img src="{% static 'showinfo/img/user.jpg' %}" height="50" width="50"  class="img-responsive" />' +
                        '</div>' +
                        '<div class="col-xs-8">' +
                        '<p class="label label-primary">' +
                        content +
                        '</p>' +
                        '</div>' +

                        '</div>';
                return divstr
            }
            else {
                var divstr = '<div class="row">' +
                        '<div class="col-xs-8">' +
                        '<p class="label label-success">' +
                        content +
                        '</p>' +
                        '</div>' +
                        '<div class="col-xs-2">' +
                        '<img src="{% static 'showinfo/img/tuling.jpg' %}"' +
                        'height="50" width="50" class="img-responsive">' +
                        '</div>' +
                        '</div>';
                return divstr;

            }
        }


        function getdiv(content, issend) {


            if (issend) {
                var divstr = '<div class="row msg_container base_sent">' +
                        '<div class="col-md-10 col-xs-10">' +
                        '<div class="messages msg_sent">' +
                        '<p class="label label-primary col-lg-offset-2">' + content + '</p>' +

                        '</div>' +
                        '</div>' +
                        '<div class="col-md-2 col-xs-2 avatar">' +
                        '<img src="{% static 'showinfo/img/user.jpg' %}"' +
                        'height="50" width="50" class="img-responsive">' +
                        '</div>' +
                        '</div>';
                return divstr;
            }
            else {
                var divstr = '<div class="row msg_container base_receive">' +
                        '<div class="col-md-2 col-xs-2 avatar">' +
                        '<img src="{% static 'showinfo/img/tuling.jpg' %}"' +
                        'height="50" width="50" class="img-responsive">' +
                        '</div>' +
                        '<div class="col-md-10 col-xs-10">' +
                        '<div class="messages msg_receive">' +
                        '<p class="label label-success col-lg-offset">' + content + '</p>' +

                        '</div>' +
                        '</div>' +
                        '</div>';
                return divstr;
            }
        }

        function getdata() {

            var width=(window.screen.availWidth/15);
            console.log(width);
            var url = "{% url "getapis:tuling" "gg" %}";

            var content = $("#content").val();
            if (content.length == 0) {
                content = "你是谁";
            }
            url = url.replace("gg", content);
            console.log(content);
            $.getJSON(url, function (result) {
                var info = result.text;
                console.log(info);
                info = formatStr(width, info);
                var senddiv = getdiv2(content, true);
                var recvdiv = getdiv2(info, false);
                $("#content").val('');

                $("#chatlist").append(senddiv);
                $("#chatlist").append(recvdiv);
            });
        }
        $(function () {
            getdata();
        });
        function formatStr(len, str) {//len即为你容器一行最多能放多少个英文字符
            str=str.replace("<br>","");
            var l = str.match(/[^ -~]/g) == null ? str.length : str.length + str.match(/[^ -~]/g).length;
            if (l <= len)return str;
            var newStr = "", c = "";
            var t_len = 0, c_len = 0;
            for (var i = 0; i < str.length; i++) {
                c = str.charAt(i);
                if (escape(c).length > 4) {
                    t_len += 2;
                    c_len = 2;
                } else t_len++;
                if (t_len == len) {
                    newStr += (c + "<br/>");
                    t_len = 0;
                    c_len = 0;
                } else if (t_len > len) {
                    newStr += ("<br/>" + c);
                    t_len = c_len;
                } else newStr += c;
            }
            return newStr;
        }
    </script>

{% endblock %}